<template>
  <div class="merchat-list">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{
        name
      }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="list-title">查询条件</div>
    <Row type="flex">
      <Form
        ref="formInline"
        :model="formInline"
        inline
        :label-width="0"
        label-position="left"
      >
        <FormItem label="" prop="premisesName">
          <Input
            type="text"
            v-model="formInline.premisesName"
            placeholder="楼盘名称"
            clearable
            style="width: 200px"
          />
        </FormItem>

        <FormItem prop="date" label="">
          <DatePicker
            ref="datePicker"
            type="daterange"
            @on-change="selectDate"
            placeholder="请选择创建时间"
            style="width: 200px"
          ></DatePicker>
        </FormItem>

        <FormItem label="" prop="title">
          <Input
            type="text"
            v-model="formInline.title"
            placeholder="动态标题"
            clearable
            style="width: 200px"
          />
        </FormItem>

        <div class="form-but">
          <Button type="success" @click="getList({pageNum: 1})">查询</Button>
          &nbsp;&nbsp;
          <Button @click="handleReset('formInline')">清空</Button>
        </div>
      </Form>
    </Row>
    <div>
      <Table
        class="list-table"
        stripe
        border
        ref="selection"
        :columns="columns"
        :data="dataList"
      ></Table>
      <div class="table-page">
        <Page
          :total="total"
          show-sizer
          show-elevator
          show-total
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
        />
      </div>
    </div>
    <Modal width="500" footer-hide v-model="bindShow" title="V10绑定动态">
      <div class="report-content">
        <Row class="base-form">
          <h3>动态标题： {{ title }}</h3>
          <h3>所属楼盘： {{ premisesName }}</h3>
          <br />
          <h4>{{ masg }}</h4>
          <Row v-for="(item, index) in bindDynamicList.items" :key="index">
            <h4 style="margin-bottom: 10px">绑定关系{{ index + 1 }}:</h4>
            <h3 style="margin-bottom: 10px">
              premisesUuid：{{ item.premisesUuid }}
            </h3>
            <h3 style="margin-bottom: 10px">
              companyUuid：{{ item.externalCompanyId }}
            </h3>
            <h3 style="margin-bottom: 10px">
              dynamicUuid：{{ item.dynamicUuid }}
            </h3>
            <br />
          </Row>
        </Row>
      </div>
    </Modal>
    <Modal width="1200" footer-hide v-model="spinShow" title="楼盘动态详情">
      <div class="report-content">
        <div>
          <Table border :columns="detailColumus" :data="dynamic"></Table>
          <h3>简介：</h3>
          <p v-html="dynamicDetail.remark"></p>&nbsp;
          <h3>内容：</h3>
          <p v-html="dynamicDetail.content" class="content-wrapper"></p>&nbsp;
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from "axios";
import { formatTime } from "@/utils";
import Api from "@/api";

const premisesApi = Api.Premises;
const dynamicApi = Api.dynamic;
const commonApi = Api.Common;
export default {
  name: "login",
  components: {},
  data() {
    return {
      breadcrumb: ["系统管理", "楼盘动态列表"],
      formInline: {
        premisesName: "",
        createTimeStart: "",
        createTimeEnd: "",
        title: "",
      },
      dataList: [],
      columns: [
        {
          title: "主键Id",
          key: "id",
          minWidth: 80,
        },
        {
          title: "楼盘名称",
          key: "premisesName",
          minWidth: 200,
        },
        {
          title: "动态标题",
          key: "title",
          minWidth: 200,
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth: 180,
          render: (h, params) =>
            h("div", {}, formatTime(params.row.createTime, "second")),
        },
        {
          title: "更新时间",
          key: "updateTime",
          minWidth: 180,
          render: (h, params) =>
            h("div", {}, formatTime(params.row.updateTime, "second")),
        },
        {
          title: "操作",
          key: "operate",
          minWidth: 180,
          fixed: "right",
          render: (h, params) =>
            h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.getDynamicDetail(params.row.id);
                    },
                  },
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.bindModal(params.row);
                    },
                  },
                },
                "查看绑定V10"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: "推送楼盘动态",
                        content: "确定推送此楼盘动态给至V10？",
                        onOk: () => {
                          this.pushDynamicToV10(params.row.id);
                        },
                      });
                    },
                  },
                },
                "推送V10"
              ),
            ]),
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      spinShow: false,
      bindShow: false,
      masg: "",
      title: "",
      premisesName: "",
      id: 0,
      bindDynamicList: {
        items: [],
      },
      dynamicDetail: {},
      dynamic: [
        
      ],
      detailColumus: [
        {
          title: "主键Id",
          key: "id",
        },
        {
          title: "楼盘名称",
          key: "premisesName",
        },
        {
          title: "动态标题",
          key: "title",
        },
        {
          title: "创建时间",
          key: "createTime",
          render: (h, params) =>
            h("div", {}, formatTime(params.row.createTime, "second")),
        },
        {
          title: "更新时间",
          key: "updateTime",
          render: (h, params) =>
            h("div", {}, formatTime(params.row.updateTime, "second")),
        },
        {
          title: "是否可见",
          key: "canSee",
        },
      ],
    };
  },
  methods: {
    // 分页变化
    changePageNum(pageNum) {
      this.getList({ pageNum });
    },
    // 条数变化
    changePageSize(pageSize) {
      this.getList({ pageSize });
    },
    async handleReset(name) {
      this.$refs.datePicker.handleClear();
      this.formInline.premisesName = "";
      this.formInline.title = "";
      this.formInline.createTimeStart = "";
      this.formInline.createTimeEnd = "";
      this.getList();
    },
    async getList(paramsPage = null) {
      let pageNum;
      let pageSize;
      let page;
      const statePage = this.page;
      if (paramsPage) {
        pageNum = paramsPage.pageNum || statePage.pageNum;
        pageSize = paramsPage.pageSize || statePage.pageSize;
        page = { pageNum, pageSize };
        this.page = { pageNum, pageSize };
      } else {
        page = statePage;
      }
      const formInline = this.formInline;
      const value = {};
      Object.keys(formInline).forEach((key) => {
        if (formInline[key]) {
          value[key] = formInline[key];
        }
      });
      const params = {
        page,
        ...value,
      };
      const { responseCode, data } = await this.$request(
        dynamicApi.listPremisesDynamic,
        params
      );
      this.dataList = [];
      this.total = 0;
      if (responseCode === "1") {
        if (data.list) {
          this.dataList = data.list;
          this.total = data.totalCount;
        }
      }
    },
    selectDate(date) {
      this.formInline.createTimeStart = date[0];
      this.formInline.createTimeEnd = date[1];
    },

    // 获取已绑定动态
    async bindModal(row) {
      this.title = row.title;
      this.premisesName = row.premisesName;
      const params = {
        id: row.id,
      };
      const { responseCode, data } = await this.$request(
        dynamicApi.findBindPremisesDynamic,
        params
      );

      if (responseCode === "1") {
        this.bindDynamicList.items = data;
        if (this.bindDynamicList.items.length === 0) {
          this.masg = "无绑定数据";
        } else {
          this.masg = "";
        }
      }
      this.bindShow = true;
    },
    async getDynamicDetail(id) {
      const {
        responseCode,
        data,
      } = await this.$request(dynamicApi.getDynamicDetail, { id });
      this.dynamicDetail = data;
      if( this.dynamicDetail.remark === "undefined" || this.dynamicDetail.remark === null){
        this.dynamicDetail.remark = "无";
      }
      this.dynamic = [data];
      this.spinShow = true;
    },
    async pushDynamicToV10(id) {
      const { responseCode, responseMessage, responseType } = await this.$request(dynamicApi.pushDynamicToV10, { id });
      if (responseCode === '1') {
        this.$Message.success('推送成功！')
      } else {
        this.$Message.error(responseMessage)
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.merchat-list {
  .ivu-form-item {
    margin-right: 20px;
  }
  .form-but {
    display: inline-block;
    margin-bottom: 24px;
  }
  .list-title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #333;
  }
  .add {
    margin-bottom: 10px;
  }
  .table-page {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }
  .ivu-table .table-success-row td {
    background-color: greenyellow;
    color: #fff;
  }
  .ivu-table .table-fail-row td {
    background-color: red;
    color: #fff;
  }
}
.content-wrapper{
  overflow-x: auto;
}
</style>